import React, { ReactNode, useEffect, useState } from 'react';
import { Box, FormStatusMessage, Grid, GridItem, Input, MainColorType, Text } from '@nova-hf/ui';
import { FormStatus } from '@nova-hf/ui/umd/ts/src/form-elements/FormStatusMessage';
import { formatPrice } from 'beta/utils/helpers';
import { useDebounce } from 'hooks/useDebounce';
import Link from 'next/link';
import { useRouter } from 'next/router';
import {
  ContractStatus,
  useContractsQuery,
  useCurrentPeriodQuery,
  useServiceQuery,
  useUpdateServiceNicknameMutation,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import { SettingsButtons } from '../components/SettingsButtons';
import { StillingarLoader } from '../components/StillingarLoader';

type ServiceSettingsContainerProps = {
  color: MainColorType;
};

export const ServiceSettingsContainer = ({ color }: ServiceSettingsContainerProps) => {
  const { t } = useTranslation(['stillingar', 'fiber']);
  const { query } = useRouter();
  const serviceId = typeof query?.serviceId === 'string' ? query?.serviceId : '';
  const customerId = typeof query?.customerId === 'string' ? query?.customerId : '';

  const { data, loading, error } = useServiceQuery({
    variables: {
      serviceId: (query.serviceId as string) ?? '',
    },
    skip: !query.serviceId,
  });

  const service = data?.service;
  const {
    data: contractData,
    loading: contractLoading,
    error: contractError,
  } = useContractsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });
  const contract = contractData?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const variant = contract?.variant;

  const { data: periodData } = useCurrentPeriodQuery({
    variables: {
      input: {
        id: contract?.id ?? '',
      },
    },
    skip: !contract?.id || contract?.status !== ContractStatus.Active,
  });

  const [updateServiceNickname] = useUpdateServiceNicknameMutation();

  const [serviceNickname, setServiceNickname] = useState('');
  const [showNicknameMessage, setShowNicknameMessage] = useState<FormStatus>(null);

  useEffect(() => {
    if (service?.nickname) {
      const name: string = service.name ?? '';
      const nickname: string = service.nickname ?? '';
      setServiceNickname(nickname ? nickname : name);
      if (showNicknameMessage) setShowNicknameMessage(null);
    }
  }, [service]);

  useDebounce(
    async () => {
      const trimmedNick = serviceNickname.trim();
      if (trimmedNick !== '' && trimmedNick !== service?.nickname) {
        try {
          const { data } = await updateServiceNickname({
            variables: {
              input: {
                serviceId: (query.serviceId as string) ?? '',
                nickname: trimmedNick,
              },
            },
          });
          if (data?.updateServiceNickname?.service) setShowNicknameMessage('success');
          if (data?.updateServiceNickname?.error) setShowNicknameMessage('error');
        } catch (e) {
          setShowNicknameMessage('error');
        }
      }
    },
    500,
    [serviceNickname],
  );

  useEffect(() => {
    // Hide the messages after 3 seconds
    const timeId = setTimeout(() => {
      if (showNicknameMessage) setShowNicknameMessage(null);
    }, 3000);

    return () => {
      clearTimeout(timeId);
    };
  }, [showNicknameMessage]);

  if (
    !service ||
    error ||
    contractError ||
    (variant?.__typename !== 'SubscriptionVariant' &&
      variant?.__typename !== 'ProvisionedSubscriptionVariant')
  )
    return null;
  if (loading || contractLoading) return <StillingarLoader />;

  return (
    <>
      <Grid gridTemplate={{ sm: 8 }}>
        <GridItem gridColumn={{ sm: 'span8', xl: 'span4' }}>
          <Input
            id="nickname"
            label={t('stillingar:service.nickLabel')}
            name="nickname"
            placeholder={t('stillingar:service.nickPlaceholder')}
            defaultValue={serviceNickname}
            onChange={(e) => setServiceNickname(e.target.value)}
          />
          {!!showNicknameMessage && (
            <FormStatusMessage
              status={showNicknameMessage}
              message={
                showNicknameMessage === 'success'
                  ? t('stillingar:service.nicknameSuccess')
                  : t('stillingar:errors.savedError')
              }
            />
          )}
        </GridItem>
        <GridItem gridColumn={{ sm: 'span8', xl: 'span4' }}>
          <Input
            id="service"
            label={t('stillingar:service.serviceLabel')}
            name="service"
            value={contract?.productDescription || t('stillingar:errors.notRegistered')}
            disabled
          />
        </GridItem>
      </Grid>
      <Box marginTop={3} display="flex" flexDirection="column" gap={3}>
        <Text variant="subtitleBold">{t('stillingar:service.yourContract')}</Text>
        <Box display="flex" gap={3} flexDirection="row">
          <Box width="6/12">
            <Text variant="eyebrowMedium">{t('fiber:betaAccordion.pack')}</Text>
            <Text variant="pMediumRegular">{variant?.name}</Text>
          </Box>
          <Box>
            <Text variant="eyebrowMedium">{t('fiber:betaAccordion.price')}</Text>
            {periodData?.currentPeriod?.totalCharge && (
              <Text variant="pMediumRegular">
                {`${formatPrice(periodData?.currentPeriod?.totalCharge ?? 0)} ${t(
                  'fiber:betaAccordion.unit',
                )}`}
              </Text>
            )}
          </Box>
        </Box>
        <Box borderWidth="1px" borderColor="grey200" borderBottomStyle="solid">
          <Box marginBottom={2}>
            <Text variant="eyebrowMedium">{t('fiber:betaAccordion.description')}</Text>
            <Text variant="pMediumRegular">{variant?.description ?? '-'}</Text>
          </Box>
        </Box>
        <SettingsButtons
          buttonDescription={t('fiber:betaAccordion.change')}
          confirmButton={{
            text: t('fiber:betaAccordion.buttonChange'),
            colorScheme: color,
            renderAs: 'a',
            dottedShadow: 'none',
            icon: 'longArrowRight',
            wrapper: (link: ReactNode) => (
              <Link
                href={{
                  pathname: '/beta/[customerId]/thjonustur/[serviceId]/thjonustubreyting',
                  query: { customerId: query.customerId, serviceId: query.serviceId },
                }}
                legacyBehavior
              >
                {link}
              </Link>
            ),
          }}
        />
      </Box>
    </>
  );
};